<template>
  <div>
    <el-select
      v-model="selectValue"
      :disabled="disabled"
      :multiple="multiple"
      value-key="packageId"
      clearable
      filterable
      remote
      :remote-method="handleSearch"
      placeholder="请选择礼包游戏"
      @clear="handleSearch('')"
    >
      <div class="option">
        <el-option
          v-for="item in options"
          :key="item.packageId"
          :label="item.appName"
          :value="item"
        ><el-avatar size="medium" :src="item.icon" class="icon" />
          <span class="option__left">{{ item.appName }}</span>
          <!-- <span class="option__right">应用ID: {{ item.albumId }}</span> -->
        </el-option>
      </div>
      <div class="footer-total">总计 {{ total }} 条</div>
    </el-select>
  </div>
</template>

<script>
import { getWelfareGiftApps } from 'dependencies/api/welfare'
import LoadingMixins from 'modules/mixins/section-loading'
import { welfareType } from 'dependencies/fields/welfare'

export default {
  components: {},
  mixins: [LoadingMixins],
  props: {
    // 绑定的值（双向绑定回显的值）
    value: {
      type: [Number, String, Object],
      default() {
        return undefined
      }
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    multiple: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 下拉修改时使用到的参数
    editinfo: {
      type: Object,
      default: () => {}
    },
    prop: {
      type: String,
      default: ''
    },
    albumProp: {
      type: String,
      default: ''
    },
    appType: {
      type: String,
      default: ''
    }
  },
  data() {
    // 这里存放数据
    return {
      options: [],
      selectValue: '',
      total: 0,
      search: ''
    }
  },
  watch: {
    'data.welfareType': {
      handler(newValue, oldvalue) {
        // 函数调用顺序要在options赋值为空数组之后
        if (newValue && oldvalue !== newValue) {
          this.reset()
          this.getOptionList()
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    reset() {
      this.search = ''
      this.selectValue = {}
      this.options = []
      this.total = 0
    },
    handleSearch(title) {
      this.search = title
      this.options = []
      this.total = 0
      this.getOptionList()
    },
    // 下拉框隐藏事件
    handleVisible(val) {
      // 下拉框隐藏后重新加载下拉数据
      if (!val) {
        this.getOptionList()
      }
    },
    submit() {
      if (this.prop) {
        if (typeof this.data === 'object') {
          this.$set(this.data, this.prop, this.selectValue?.packageId || '')
          this.$set(this.data, 'appName', this.selectValue?.appName || '')
        } else {
          this.$emit('update:data', this.selectValue?.packageId || '')
        }
      }
    },
    // 获取列表数据
    async getOptionList() {
      this.loading()
      try {
        const data = await getWelfareGiftApps({
          query: {
            appName: this.search,
            [welfareType.prop]: this.data[welfareType.prop]
          }
        })
        if (data.success) {
          this.options = data.data
          this.total = data.data.length
        }
      } finally {
        this.loaded()
      }
    },
    // 初始化数据
    initData() {
      // 当父组件上存在值时，对select值进行初始化
      const value = this.value
      if (typeof value !== 'object' && !isNaN(value)) {
        this.selectValue = {
          packageId: Number(value),
          appName: this.albumProp ? this.data[this.albumProp] : undefined
        }
        this.search = this.selectValue.appName
        return
      }
      this.selectValue = this.value
    }
  }
}
</script>
<style lang="scss" scoped>
.option {
  .el-select-dropdown__item {
    height: 46px;
    line-height: 46px;
  }
  &__left {
    float: left;
  }
  .icon {
    float: left;
    margin-top: 5px;
    margin-right: 10px;
  }
  &__right {
    float: right;
    color: #8492a6;
    font-size: 13px;
  }
}
.pagin {
  background: #fff;
}
::-webkit-scrollbar {
  width: 10px;
}
.footer-total {
  font-size: 14px;
  text-align: center;
  color: #999;
}
</style>
